<template>
	<div>

		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">
			<div style="flex:1"></div>

			<div class="displayFlex date-item1" style="flex:2;justify-content: center;">
				<el-date-picker v-model="params.year" type="year" placeholder="时间" size="mini" value-format="yyyy"
					style="width: 50px;" @change="getEquipmentStdBookList">
				</el-date-picker>
				<i class="el-icon-arrow-down" style="margin-bottom: 0px;color: #999;"></i>
			</div>

			<div style="flex:1;text-align:right">

			</div>
		</div>

		<div v-loading="loading">
			<div v-for="(item,index) in dataList" :key="index" class="bgfff bra8 mb10 pad20 point"
				style="display: flex;justify-content: space-between;" @click="$router.push('/produceManage/order')">
				<div class="bra8 mr20" style="width: 350px;background: #F5F5FB;padding: 25px 0;">
					<div class="font16 textCenter" style="color: #222;">{{item.equipmentName}}</div>
					<div class="textCenter mr20">
						<div :id="'echarts'+index" style="width: 100%;height: 200px;">
						</div>
					</div>

					<div class="displayFlex" style="justify-content: center;">
						<div class="mr20 textCenter color555">
							<span>生产</span>
							<span>
								{{item.normalProduceNum}}天
							</span>
						</div>

						<div style="color: #C8C8C8;">|</div>

						<div class="textCenter  color555 ml20">
							<span>停产</span>
							<span>
								{{item.notProduceNum}}天
							</span>
						</div>
					</div>
				</div>

				<div class="textCenter mr20" style="width: calc(100% - 770px);display: flex;flex-wrap: wrap;"
					@click.stop="">
					<!-- <div v-for="(product,index2) in item.productList" class="mr20"
						style="width: calc(50% - 20px);display: flex;border-radius: 8px;border: 1px solid #E8E8F5;justify-content: space-between;padding: 10px;height: 130px;">
						<div class="color555 font16 mr10" style="text-align: left;width: calc(50% - 10px);">
							<div class="mb5">{{product.productName}}</div>
							<div>{{product.qty}}{{product.unitValue}}</div>
						</div>
						
					</div> -->

					<el-tabs :value="(item.productList && item.productList[0])?item.productList[0].productId:''" type="card"
						@tab-click="handleClick" style="width: 100%;">
						<el-tab-pane v-for="(product,index2) in item.productList" :label="product.productName"
							:name="product.productId">
							<div :id="'chart'+index+index2" style="width: 100%;height: 240px;"></div>
						</el-tab-pane>
					</el-tabs>
				</div>

				<div class="textCenter" style="width:400px;display: flex;border-radius: 8px;border: 1px solid #E8E8F5;">
					<div>
						<div class="pl20 pt20 font13 color555">生产和环保相关度分析</div>
						<div class="displayFlex mt30">
							<div style="width: 3px;height: 30px;background: #5054C2"></div>
							<div class="ml30">
								<div style="color: #999;" class="font11 mb5">综合评价</div>
								<div style="color: #5054C2;" class="font13">优秀</div>
							</div>
						</div>
					</div>

					<div style="width: 70%;height: 220px;margin-top: 50px;" :id="'main'+index"></div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that

	export default {
		name: 'produceHome',
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
				},
				loading: false,
				dataList: [],
				dataList2: [],
				activeName: '0',
			}
		},
		mounted() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getEquipmentStdBookList()
		},

		methods: {
			getEquipmentStdBookList() {
				that.loading = true
				that.ajax({
					url: '/productionEquipment/stdBook/getEquipmentStdBookList?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
						let xData = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
						let legend = []
						for (let key in that.dataList) {
							let thisitem = that.dataList[key]

							let scores = []
							for (let key2 in thisitem.score) {
								if (key2 == 'prodStablePercent') {
									scores.push({
										title: '生产设施稳定率',
										score: thisitem.score.prodStablePercent
									})
								}
								if (key2 == 'defenceStablePercent') {
									scores.push({
										title: '防治设施稳定率',
										score: thisitem.score.defenceStablePercent
									})
								}
								if (key2 == 'stdBookPercent') {
									scores.push({
										title: '台账完成率',
										score: thisitem.score.stdBookPercent
									})
								}
								if (key2 == 'runPercent') {
									scores.push({
										title: '产排污协同性',
										score: thisitem.score.runPercent
									})
								}
							}
							for (let index2 in thisitem.productList) {
								let product = thisitem.productList[index2]

								let legend = []
								let yData = []
								legend.push(product.productName)
								let dataItem = {
									name: product.productName,
									smooth: true,
									symbol: "none",
									type: 'line',
									data: []
								}

								for (let monthItem of product.monthList) {
									dataItem.data.push(monthItem.qty)
								}
								yData.push(dataItem)

								setTimeout(function() {
									console.log(legend, xData, yData)
									that.formLine("chart" + key + index2, legend, xData, yData)
								}, 500)
							}
							setTimeout(function() {
								that.formChart("main" + key, scores, "废气")
								that.forProgress("echarts" + key,thisitem.stdBookCompletePercent)
							}, 500)

						}

						that.loading = false
					},
				})
			},

			forProgress(id,stdBookCompletePercent) {
				let chartDom = document.getElementById(id);
				let myChart = echarts.init(chartDom);
				var data = {
					value: stdBookCompletePercent,
					color: {
						pieMini: '#0f0', //小圆形颜色
						piePlus: '#01fea2', //大圆形颜色
						value: '#F7E5E9', //底部数值颜色
					},
				}

				let option = {
					series: [{
						"name": "仪表盘",
						"type": "gauge",
						"splitNumber": 10,
						"axisLine": {
							"lineStyle": {
								"color": [
									[0, "#46da04"], //初始值及颜色
									[data.value / 100, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
											offset: 0.1,
											color: "#5054C2"
										},
										{
											offset: 0.6,
											color: "#5054C2"
										},
										{
											offset: 1,
											color: "#5054C2"
										}
									])], //渐变值颜色

									[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
											offset: 0.1,
											color: "#F7E5E9"
										},
										{
											offset: 0.8,
											color: "#F7E5E9"
										},
										{
											offset: 1,
											color: "#F7E5E9"
										}
									])] //底层颜色渐变
								],
								"width": 20
							}
						},
						detail: {
							offsetCenter: [0, "5%"], //数值的显示位置
							formatter: '台账完整率',
							textStyle: { //仪表盘的数值单位及颜色，字体大小的改变
								fontSize: 14,
								color: '#888',
								top: '100%',
								fontWeight: '100'
							}
						},

						axisLabel: {
							show: false,
						},
						"axisTick": {
							show: false,
						},
						"splitLine": {
							"show": false,
						},
						"itemStyle": {
							show: false,
						},
						"title": {
							"offsetCenter": [0, "75%"],
							"textStyle": {
								color: '#222',
								fontSize: 20,
								fontFamily: '"Microsoft Yahei","微软雅黑"',
							}
						},
						"data": [{
							"name": data.value + "%",
							"value": data.value,
						}],
						pointer: {
							show: false,
						},
					}, ]
				}

				myChart.setOption(option);
			},

			formChart(id, dataList, title) {
				let chartDom = document.getElementById(id);
				let myChart = echarts.init(chartDom);
				let option;
				let names = []
				let datas = []

				for (let item of dataList) {
					console.log(item)
					names.push({
						name: item.title,
						max: 100
					})
					datas.push(item.score)
				}

				//console.log(datas)

				option = {
					legend: {
						show: false
					},
					radar: {
						// shape: 'circle',
						indicator: names,
						radius: 65,
						splitNumber: 4,
						shape: 'circle',
						//startAngle: 90,
						splitArea: {
							areaStyle: {
								color: [
									'rgba(255, 248, 248, 1)', // 100% 透明
									'rgba(255, 248, 248, 1)', // 20% 透明度的白色渐变
									'rgba(255, 248, 248, 1)',
									'rgba(255, 248, 248, 1)',
									'rgba(255, 248, 248, 1)',
									'rgba(255, 248, 248, 1)' // 100% 白色
								].reverse(), // 逆序，形成从中心到边缘的渐变效果
								shadowColor: '(255, 233, 233, 1)',
								shadowBlur: 10
							}
						},
					},
					series: [{
						name: '',
						type: 'radar',
						data: [{
							value: datas,
							name: 'name',
							label: {
								show: true,
								formatter: function(params) {
									return params.value;
								}
							},
							areaStyle: {
								color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{
										color: 'rgba(229, 230, 246, 1)',
										offset: 0
									},
									{
										color: 'rgba(229, 230, 246, 1)',
										offset: 1
									}
								])
							}
						}]
					}]
				};

				option && myChart.setOption(option);
			},

			formLine(chartId, legend, xData, yData) {
				console.log(chartId)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					backgroundColor: '#FDF8F8',
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: legend,
						show: false,
					},
					grid: {
						top: '3%',
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xData,
						axisTick: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true, // 是否显示刻度标签，默认显示
							interval: 10, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
							//rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
							inside: false, // 刻度标签是否朝内，默认朝外
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#333',
								fontSize: 14,
								fontWeight: 'bold'
							}
						},
					},
					series: yData
				};

				option && myChart.setOption(option);
			},
		}
	}
</script>
<style scoped>
	.date-item1>>>.el-input__prefix,
	.date-item1>>>.el-input__suffix {
		display: none !important;
	}

	.date-item1>>>.el-input__inner {
		height: 20px !important;
		padding: 0 0px 0px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		color: #333 !important;
		width: 50px;
	}
</style>